<script>
  import Vue from 'vue';
  import Flash from '../../../flash';
  import { __ } from '../../../locale';

  const Store = gl.issueBoards.BoardsStore;

  export default Vue.extend({
    props: {
      issue: {
        type: Object,
        required: true,
      },
      list: {
        type: Object,
        required: true,
      },
    },
    computed: {
      updateUrl() {
        return this.issue.path;
      },
    },
    methods: {
      removeIssue() {
        const { issue } = this;
        const lists = issue.getLists();
        const req = this.buildPatchRequest(issue, lists);

        const data = {
          issue: this.seedPatchRequest(issue, req),
        };

        if (data.issue.label_ids.length === 0) {
          data.issue.label_ids = [''];
        }

        // Post the remove data
        Vue.http.patch(this.updateUrl, data).catch(() => {
          Flash(__('Failed to remove issue from board, please try again.'));

          lists.forEach(list => {
            list.addIssue(issue);
          });
        });

        // Remove from the frontend store
        lists.forEach(list => {
          list.removeIssue(issue);
        });

        Store.detail.issue = {};
      },
      /**
      * Build the default patch request.
      */
      buildPatchRequest(issue, lists) {
        const listLabelIds = lists.map(list => list.label.id);

        const labelIds = issue.labels
          .map(label => label.id)
          .filter(id => !listLabelIds.includes(id));

        return {
          label_ids: labelIds,
        };
      },
      /**
      * Seed the given patch request.
      *
      * (This is overridden in EE)
      */
      seedPatchRequest(issue, req) {
        return req;
      },
    },
  });
</script>
<template>
  <div
    class="block list"
  >
    <button
      class="btn btn-default btn-block"
      type="button"
      @click="removeIssue"
    >
      Remove from board
    </button>
  </div>
</template>
